<template>
  <div>
    <my-breadcrumb :items="['消息管理', '发送']"/>
    <search :formItems="searchItems" @search="getList" ref="search"/>
    <div class="add">
      <el-button type="primary" @click="toAdd">新增消息</el-button>
    </div>
    <el-table :data="sends" border @sort-change="orderByTime">
      <el-table-column
        type="index"
        width="55">
      </el-table-column>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="创建时间"
        sortable="custom"
        :show-overflow-tooltip="true"
        prop="createtime">
      </el-table-column>
      <el-table-column
        label="发送标题"
        width="200px"
        :show-overflow-tooltip="true"
        prop="title">
      </el-table-column>
      <el-table-column
        label="发送内容"
        :show-overflow-tooltip="true"
        prop="content">
        <template slot-scope="scope">
          <div v-html="scope.row.content" class="inner"></div>
        </template>
      </el-table-column>
      <el-table-column
        label="发送对象"
        prop="membername">
      </el-table-column>
      <el-table-column
        label="消息类型"
        prop="type">
        <template slot-scope="scope">
          {{ scope.row.type === '1' ? '系统消息' : (scope.row.type === '2' ? '提醒消息' : '官方消息') }}
        </template>
      </el-table-column>
      <el-table-column
        label="推送类型"
        prop="addtype">
        <template slot-scope="scope">
          {{ scope.row.addtype === '1' ? '全体推送' : (scope.row.addtype === '2' ? '群发推送' : '单独推送') }}
        </template>
      </el-table-column>
      <el-table-column
        label="文本类型"
        prop="texttype">
        <template slot-scope="scope">
          {{ scope.row.texttype === '1'  ? '富文本' : '普通文本' }}
        </template>
      </el-table-column>
      <el-table-column
        label="发送方式"
        prop="partype">
        <template slot-scope="scope">
          {{ scope.row.partype === '1' ? '资讯' : (scope.row.partype === '2' ? '系统' : (scope.row.partype === '3' ? '闹钟' : (scope.row.partype === '4' ? '官方' : (scope.row.partype === '5' ? '帖子' : (scope.row.partype === '6' ? '提醒' : (scope.row.partype === '7' ? '富文本帖子' : '')))))) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="toDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
    <el-dialog title="发送消息" :visible.sync="showAdd" width="800px" :close-on-click-modal="false">
      <el-form :model="send" :rules="rules" ref="addForm" label-width="90px">
        <el-form-item label="消息类型" prop="type">
          <el-select v-model="send.type">
            <el-option value="1" label="系统消息"/>
            <el-option value="2" label="提醒消息"/>
            <el-option value="3" label="官方消息"/>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="send.title"/>
        </el-form-item>
        <el-form-item label="内容" prop="content" style="width: 500px;">
          <el-input type="textarea" v-model="send.content" style="width: 400px;"/>
        </el-form-item>
        <el-form-item label="推送" prop="addtype">
          <el-select v-model="send.addtype" @change="send.organization = ''">
            <el-option value="1" label="全体推送"/>
            <el-option value="2" label="群发推送"/>
            <el-option value="3" label="单独推送"/>
            <el-option value="4" label="全体商家"/>
            <el-option value="5" label="全体普通用户"/>
          </el-select>
        </el-form-item>
        <el-form-item label="推送对象" prop="organization" v-if="send.addtype === '2' || send.addtype === '3'">
          <div class="select-box" v-if="send.addtype === '2'">
            <span v-for="(item, index) in groups" :key="index" style="margin-right: 10px;">{{ item.name }}</span>
            <el-button type="text" @click="toShowList('group')">选择用户组</el-button>
          </div>
          <div class="select-box" v-if="send.addtype === '3'">
            <span>{{ user.name }}</span>
            <el-button type="text" @click="toShowList('user')">选择用户</el-button>
          </div>
          <!--<el-select v-model="send.organization">
            <el-option v-for="(item, index) in organization" :key="index" :value="item.id" :label="item.name"/>
          </el-select>-->
        </el-form-item>
        <el-form-item label="推送类型" prop="partype" @change="send.parid = ''">
          <el-select v-model="send.partype">
            <el-option value="1" label="资讯"/>
            <el-option value="2" label="系统" v-show="send.type !== '2' && send.type !== '3'"/>
            <el-option value="3" label="闹钟" v-show="send.type !== '1' && send.type !== '2' && send.type !== '3'"/>
            <el-option value="4" label="官方" v-show="send.type !== '1' && send.type !== '2'"/>
            <el-option value="5" label="帖子"/>
            <el-option value="6" label="提醒" v-show="send.type !== '1' && send.type !== '3'"/>
            <el-option value="7" label="富文本帖子"/>
          </el-select>
        </el-form-item>
        <el-form-item label="推送内容" prop="parid" v-if="send.partype === '1' || send.partype === '5' || send.partype === '7'">
          <div class="select-box" v-if="send.partype === '1'">
            <span>{{ nowNew.title }}</span>
            <el-button type="text" @click="toShowList('news')">选择资讯</el-button>
          </div>
          <div class="select-box" v-if="send.partype === '5'">
            <span>{{ nowPost.title }}</span>
            <el-button type="text" @click="toShowList('post')">选择帖子</el-button>
          </div>
          <div class="select-box" v-if="send.partype === '7'">
            <span>{{ nowPost.title }}</span>
            <el-button type="text" @click="toShowList('rich')">选择富文本帖子</el-button>
          </div>
          <!--<el-select v-model="send.parid">-->
            <!--<el-option v-for="(item, index) in parid" :key="index" :value="item.id" :label="item.title"/>-->
          <!--</el-select>-->
        </el-form-item>
      </el-form>
      <div class="footer" slot="footer">
        <el-button type="primary" @click="toSubmit">提交</el-button>
        <el-button type="danger" @click="showAdd = false">取消</el-button>
      </div>
    </el-dialog>
    <select-list ref="user" :url="'/type/getmemberarr?delflag=0'" :searchItems="userSearch" :tableItem="userTableItems" @selectRow="userChange"/>
    <select-list ref="group" :url="'/Organization/index?delflag=0'" :searchItems="groupSearch" :tableItem="groupTableItems" :multiple="{list: []}" @getMultiple="getGroups"/>
    <select-list ref="news" :url="'/placard/index?delflag=0'" :searchItems="newsSearch" :tableItem="newsTableItems" @selectRow="newsChange"/>
    <select-list ref="post" :url="'/article/index?delflag=0'" :searchItems="postSearch" :tableItem="postTableItems" @selectRow="postChange"/>
    <select-list ref="rich" :url="'/Richarticle/index?delflag=0'" :searchItems="postSearch" :tableItem="postTableItems" @selectRow="postChange"/>
  </div>
</template>

<script>
import {deleteRow} from '../../utils/getList'
import tableItems from '@/config/tableItems'
import selectList from '@/components/common/selectList'
export default {
  name: 'send',
  data () {
    return {
      searchItems: [
        {
          label: '标题',
          type: 'input',
          key: 'title'
        },
        {
          label: '发送对象',
          type: 'input',
          key: 'membername'
        },
        {
          label: '发送时间',
          type: 'times',
          key: 'times'
        }
      ], // 检索结构
      sends: [],
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      showAdd: false,
      send: {
        type: '',
        title: '',
        content: '',
        organization: '',
        isread: '0',
        addtype: '',
        texttype: '2',
        partype: '',
        parid: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择消息类型', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入消息标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入消息内容', trigger: 'blur' }
        ],
        organization: [
          { required: true, message: '请选择用户或用户组', trigger: 'change' }
        ],
        // isread: [
        //   { required: true, message: '请输入内容', trigger: 'blur' }
        // ],
        addtype: [
          { required: true, message: '请选择推送方式', trigger: 'change' }
        ],
        texttype: [
          { required: true, message: '请选择发送方式', trigger: 'change' }
        ],
        partype: [
          { required: true, message: '请选择推送类型', trigger: 'change' }
        ],
        parid: [
          { required: true, message: '请选择推送内容', trigger: 'change' }
        ]
      },

      user: {}, // 用户，单个
      groups: [], // 用户组，可以多个

      nowNew: {}, // 资讯
      nowPost: {}, // 帖子

      userSearch: [
        {
          label: '用户名称',
          type: 'input',
          key: 'membername'
        },
        {
          label: '手机号',
          type: 'input',
          key: 'phone'
        }
      ],
      groupSearch: [
        {
          label: '类型',
          type: 'select',
          key: 'type',
          options: [{id: '1', name: '用户'}, {id: '2', name: '商家'}]
        },
        {
          label: '名称',
          type: 'input',
          key: 'name'
        }
      ],
      newsSearch: [
        {
          label: '标题',
          type: 'input',
          key: 'title'
        },
        {
          label: '商品名称',
          type: 'input',
          key: 'name'
        },
        {
          label: '发布时间',
          type: 'times',
          key: 'times'
        },
        {
          label: '商家名称',
          type: 'input',
          key: 'businessname'
        }
      ],
      postSearch: [
        {
          label: '帖子标题',
          type: 'input',
          key: 'title'
        },
        {
          label: '发布人',
          type: 'input',
          key: 'membername'
        },
        {
          label: '发布时间',
          type: 'times',
          key: 'time'
        }
      ],

      userTableItems: tableItems.allUserList,
      groupTableItems: tableItems.groupList,
      newsTableItems: tableItems.newList,
      postTableItems: tableItems.postList
      // news: [],
      // topics: [],
      // parid: [],
      //
      // users: [],
      // groups: [],
      // organization: []
    }
  },
  methods: {
    // /Sendinfo/index
    getList () {
      let searchData = {}
      if (this.$refs['search']) {
        searchData = this.$refs['search'].search()
      }
      let params = {...searchData, page: this.page.pageNum, size: this.page.pageSize, orderby: this.lifting}
      this.axios.get('/Sendinfo/index', {params})
        .then(res => {
          if (res.data.status) {
            this.page.total = Number(res.data.data.count)
            this.sends = res.data.data.list
          }
        })
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList()
    },
    handleCurrentChange (e) {
      this.page.pageNum = e
      this.getList()
    },

    orderByTime (lifting) {
      if (lifting.order === 'ascending') {
        this.lifting = '2'
      } else {
        this.lifting = '1'
      }
      this.getList()
    },

    // addTypeChange (value) {
    //   if (value === '2') {
    //     this.organization = this.groups
    //   } else if (value === '3') {
    //     this.organization = this.users
    //   }
    // },
    // parTypeChange (value) {
    //   if (value === '1' || value === '3') {
    //     this.parid = this.news
    //   } else if (value === '5') {
    //     this.parid = this.topics
    //   }
    // },

    toAdd () {
      this.showAdd = true
      this.user = {}
      this.groups = []
      this.nowNew = {}
      this.nowPost = {}
      this.$refs['user'].reset()
      this.$refs['group'].reset()
      this.$refs['news'].reset()
      this.$refs['post'].reset()
      this.$nextTick(() => {
        this.$refs['addForm'].resetFields()
        this.$refs['addForm'].clearValidate()
      })
    },
    toSubmit () {
      // console.log(this.send)
      // /article/add
      let params = {}
      Object.keys(this.send).forEach(key => {
        params[key] = this.send[key]
      })
      if (params.addtype !== '2' && params.addtype !== '3') {
        delete params.organization
      }
      if (params.partype !== '1' && params.partype !== '5' && params.partype !== '3' && params.partype !== '7') {
        delete params.parid
      }
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          this.axios.post('/Sendinfo/add', this.qs.stringify(params))
            .then(res => {
              if (res.data.status === 1) {
                this.showAdd = false
                this.getList()
                this.$message.success(res.data.msg)
              }
            })
        } else {
          this.$message.error('请检查表单是否填写正确')
          return false
        }
      })
    },
    toDelete (id) {
      deleteRow({url: '/Sendinfo/delete', id}, res => {
        if (res.data.status === '1' || res.data.status === 1) {
          this.$message.success(res.data.msg)
          this.getList()
        }
      })
    },

    toShowList (ref) {
      // console.log(this.$refs[ref])
      this.$refs[ref].reset()
      this.$refs[ref].toShow()
    },
    userChange (row) {
      this.user = row
      this.send.organization = row.id
    },
    getGroups (row) {
      this.groups = row
      let temp = []
      row.forEach(item => {
        temp.push(item.id)
      })
      this.send.organization = temp
    },
    newsChange (row) {
      this.nowNew = row
      this.send.parid = row.id
    },
    postChange (row) {
      this.nowPost = row
      this.send.parid = row.id
    }
  },
  components: {
    selectList
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped>
  .inner{
    display: flex;
  }
</style>
